<style lang="less" scoped>
.main-keyword-group {
    .btn-wrap {
        padding: 5px 0;
    }
    .online,
    .offline {
        margin-left: 0;
    }
    .second-row .manage-templet {
        margin-top: 5px;
    }
    .group {
        display: inline-block;
        vertical-align: top;
    }
}
</style>
<template>
    <div class="main main-keyword-group">
        <div class="main-header">
            <el-breadcrumb>
                <el-breadcrumb-item :to="{ path: '/tickets' }">生成记录管理</el-breadcrumb-item>
                <el-breadcrumb-item>生成记录管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="main-filters">
            <el-form :inline="true" :model="query">
            </el-form>
        </div>
        <div class="main-actions">
            <div class="main-actions-label">
                共<em>{{itemsData.pagination.total}}</em>条
            </div>
             <div class="main-actions-btns">
            </div>
        </div>
        <el-table
            border
            element-loading-text="Loading..."
            v-loading.body="!itemsData.$resolved"
            :data="itemsData.items"
            @sort-change="onSortItems"
            @selection-change="onSelect"
        >
            <el-table-column sortable="custom" prop="id" label="批次" width="80"></el-table-column>
            <el-table-column label="票券大类" inline-template>
                <div>
                    <span>{{ row.parent ? row.parent.name : '-' }}</span>
                </div>
            </el-table-column>
            <el-table-column  label="票券类型" inline-template>
                <div>
                    <span>{{ row.type ? row.type.name : '-'}}</span>
                </div>
            </el-table-column>
            <el-table-column prop="start_no" label="起始编号"></el-table-column>
            <el-table-column prop="end_no" label="终止编号"></el-table-column>

            <el-table-column prop="num" label="数量"></el-table-column>
            <el-table-column label="生成时间" inline-template>
                <div>
                    <span>{{ row.created_at | date}}</span>
                </div>
            </el-table-column>
            <!-- <el-table-column label="状态属性" width="100" inline-template>
                <div>
                    <el-tag type="success" v-if="row.status === 1">已上架</el-tag>
                    <el-tag type="warning" v-else>已下架</el-tag>
                </div>
            </el-table-column> -->
            <!-- <el-table-column sortable="custom" prop="priority" label="排序"></el-table-column> -->
            <el-table-column label="操作" inline-template>
                <div class="item-menus">
                    <router-link :to="'/tickets?log_id=' + row.id"><el-button size="small">生成记录列表</el-button></router-link>
                     <el-button native-type="submit" type="primary" @click="printLog(row)">打印条形码</el-button>
                </div>
            </el-table-column>
        </el-table>

        <el-pagination
            v-if="itemsData.$resolved"
            layout="prev, pager, next, jumper"
            :total="itemsData.pagination.total"
            :current-page="query.page_num"
            :page-size="query.page_size"
            @current-change="onPageChange"
        >
        </el-pagination>

        <div id="printPage" v-show="false">
            <div v-for="(item, index) in tickets" v-bind:key="item.id" :id="'page' + index" style="text-align:center;page-break-after:always;">
                <barcode :height="height" :width="width" tag="img" :value="item.ticket_no" :options="{ displayValue: true, fontSize: 32 }"></barcode>
            </div>
        </div>
    </div>
</template>

<script>
import ListController from '../controllers/list';

import TicketLog from '../models/ticket-log';
import Promise from 'bluebird';
import TicketModel from '../models/ticket';
import { setTimeout } from 'timers';

export default new ListController({
    data() {
        return {
            ListModel: TicketLog,

            query: {
                page_num: 1,
                page_size: 20,
            },

            // statusMap: {
            //     PENDING: TempletModel.PENDING,
            //     ONLINE: TempletModel.ONLINE,
            //     OFFLINE: TempletModel.OFFLINE,
            //     REJECTED: TempletModel.REJECTED
            // },
            // statusAlias: {
            //     [TempletModel.PENDING]: {
            //         icon: 'warning',
            //         name: '待审核'
            //     },
            //     [TempletModel.ONLINE]: {
            //         icon: 'success',
            //         name: '已上架'
            //     },
            //     [TempletModel.OFFLINE]: {
            //         icon: 'gray',
            //         name: '已下架'
            //     },
            //     [TempletModel.REJECTED]: {
            //         icon: 'danger',
            //         name: '未通过'
            //     }
            // },

            tickets: [],
            editData: {},
            width: '65%',
            height: '115%',
            editDialogVisible: false
        };
    },
    methods: {
        printLog(item) {
            console.log(item)
            this.$confirm('请先确认已打印的票据已分配出票，以防重复打印')
            .then(() => {
                return TicketModel.query({
                    log_id: item.id,
                    status: TicketModel.OFFLINE,
                    page_size: 200,
                })
                .$promise
                .then(data => {
                    this.tickets = data.items;
                    setTimeout(() => {
                    this.print();
                    }, 1000);
                });
            });
          
        //     var printStr = "<html><head><meta http-equiv='Content-Type' content='text/html; charset=utf-8'></head><body >";
        //     var content = "";

        //     for(let i = 0; i < this.tickets.length; i++) {
        //         const page = document.getElementById('page'+ i);
        //         if(page) {
        //             content = content + page.innerHTML;  
        //         }
        //     }
        //      //获取需要打印的页面元素 ，page1元素设置样式page-break-after:always，意思是从下一行开始分割。
        //    debugger;
        //     printStr = printStr + content + "</body></html>";
        //     // var pwin = window.open("Print.htm", "print"); //如果是本地测试，需要先新建Print.htm，如果是在域中使用，则不需要
        //     document.write(printStr);
        //     document.close();                   //这句很重要，没有就无法实现  
        //     window.print();
        },
        print() {
            var head_str = "<html><head><title></title></head><body>"; //先生成头部
            var foot_str = "</body></html>"; //生成尾部
            var older = document.body.innerHTML;
            var new_str = document.getElementById('printPage').innerHTML; //获取指定打印区域
            var old_str = document.body.innerHTML; //获得原本页面的代码
            document.body.innerHTML = head_str + new_str + foot_str; //构建新网页
            window.print(); //打印刚才新建的网页
            document.body.innerHTML = older; 
            window.location.reload();
            //将网页还原
            return false;
        }
    }
});
</script>
